<template>
	<section class="brandDetail">
		<div class="table">
			<el-row class="header_row">
                <el-col :span="10">{{brandDetail.brandName}}  </el-col>
                <el-col :span="8"><el-button  type="primary" size="small" @click="editService" style="margin-left:24px" >修改计划</el-button></el-col>
                 
           	</el-row>
            <el-row>
                <el-col :span="4" class="col_1">监控类型：</el-col>
                <el-col :span="8" class="col_2">{{ brandDetail.brandName }}</el-col>
                <el-col :span="4" class="col_3">品牌：</el-col>
                <el-col :span="8" class="col_4">{{ brandDetail.customerName }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">关键词：</el-col>
                <el-col :span="8" class="col_2">{{ brandDetail.salesPerson }}</el-col>
                <el-col :span="4" class="col_3">平台：</el-col>
                <el-col :span="8" class="col_4">{{ brandDetail.knowLedgePerson }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">监控频率：</el-col>
                <el-col :span="8" class="col_2">{{ brandDetail.purchaser }}</el-col>
                <el-col :span="4" class="col_3">监控维度：</el-col>
                <el-col :span="8" class="col_4">{{ brandDetail.buttPerson }}</el-col>
                
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">监控时间：</el-col>
                <el-col :span="8" class="col_2">{{ brandDetail.purchaser }}</el-col>
                <el-col :span="4" class="col_3">监控日期：</el-col>
                <el-col :span="8" class="col_4">{{ brandDetail.buttPerson }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">创建者：</el-col>
                <el-col :span="8" class="col_2">{{ brandDetail.purchaser }}</el-col>
                <el-col :span="4" class="col_3">创建时间：</el-col>
                <el-col :span="8" class="col_4">{{ brandDetail.buttPerson }}</el-col>
            </el-row>
		</div>
		<div class="table">
			<el-row class="header_row">
                <el-col :span="24">监控记录</el-col>
           	</el-row>
            <el-row class="customer_row">
            <!-- class="hidden-table-cell"  用于cell单行显示-->
            <el-table :data="customerList" v-model="customerList" style="width: 100%;" 
                       highlight-current-row 
                      >
                </el-table-column>
                <el-table-column prop="title" label="标题" className="asds" min-width="200"　align="center" >
                    <template scope="scope" >
                        <div class="customer_col" >
                            <span @click="handleToDetail(scope.row)"  >
                                {{ scope.row.title}}
                            </span>
                        </div>
                    </template>
                </el-table-column>
                <!--:render-header="renderHeader"-->
                
                <el-table-column prop="createUserName" label="创建者" align="center" min-width='140' className="asds"></el-table-column> 
                <el-table-column label="创建时间"  prop="gmtCreate"  min-width="179" align="center" className="asds" :render-header="renderHeader">
                    <template scope="scope">
                            <span>{{scope.row.gmtCreate | formatUpdateTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="modifyUserName" label="修改者" align="center" min-width='95' className="asds"></el-table-column> 
                <el-table-column label="修改时间"  prop="gmtModify"  min-width="179" align="center" className="asds" :render-header="renderHeader">
                    <template scope="scope">
                            <span>{{scope.row.gmtModify | formatUpdateTime}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <el-row class="paging">
            <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page="pagingData.pageNum"
                    :page-sizes="pagingData.pageSizes"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagingData.total">
            </el-pagination> 
        </el-row>
		</div>
	</section>
</template>

<script>
	import Vue from 'vue'
	import {mapGetters} from 'vuex';
	import * as types from '../../store/mutation-types/customer/index';
	import {Row,Col,Checkbox,Button,Select,Option,Radio, Table, TableColumn,DatePicker,Input,Form,FormItem,Message,Pagination} from 'element-ui'
	import {brandLevels,totalTypes} from '~/assets/js/option_brand'
	import {formatDate} from '~/assets/js/common.js';
	import {getDate} from '~/utils/auth'
	
	Vue.use(Row);
    Vue.use(Col);
    Vue.use(Checkbox);
    Vue.use(Button);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Radio);
    Vue.use(DatePicker);
    Vue.use(Input);
    Vue.use(Form);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(FormItem);
    Vue.use(Pagination);
	Vue.prototype.$message = Message;
    export default {
    	head(){
	        return {
	            title: this.title
	        }
      	},
    	
    	data () {
            return {
                  customerList:[],
            	tabName: '计划详情',
            	title: '计划详情',
            	brandId:'',
            	brandDetail:{
            		brandName:'',
            		customerName:'',
            		complaintsAccount:'',
            		brandLevel:'0',
            		urgentState:'0',
            		createDateBegin:'',
            		createDateEnd:'',
            		planTimeBegin:'',
            		planTimeEnd:'',
            		pageSizes:50
            	},
            	pagingData: {
                    pageSizes: [10, 20, 50],    // 每页可选条数列表,
                    total: 0,
                    pageNum: 1
                },
            	pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
            }
       },
       
       computed : {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList'
            }),
		},
		mounted(){
			this.getUrl()
			this.getBrandDetailInfo()
			this.getHasFirst()
		},
		methods:{
			editService(){
				this.$router.push({path: '/brandadmin/brandEdit?id='+this.brandId});
			},
			handleCurrentChange(val){
				this.pagingData.pageNum = val;
                this.getBrandge()
			},
			handleSizeChange(val){
				this.brandDetail.pageSize = val;
                this.pagingData.pageNum = 1;
                this.getBrandPage()
			},
			
			getHasFirst(){
				this.$store.dispatch('getHasFirst',{brandId:this.brandId})
        			.then((response) => {
        				let result = response.data;
        				
        			})
        			.catch((error) => {
        				
                    })
			},
			
			//获取品牌详细信息
			getBrandDetailInfo(){
				this.$store.dispatch('brandDetailInfo',{brandId:this.brandId})
					.then((response)=>{
						if(response.data){
							let result = response.data;
        					if(result.successed == true){
	                            if(result.data){
	                            	//pageTab
		                            if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
		                                let arr = this.pageTabsList;
		                                arr[arr.length-1].name = result.data.brandName;
		                                this.$store.commit('PAGETABSLIST',{data:arr})
		                            }
	                            	this.brandDetail.brandName=result.data.brandName
	                            	this.brandDetail.customerName=result.data.customerName
	                            	this.brandDetail.salesPerson=result.data.saleMemberName
	                            	this.brandDetail.knowLedgePerson=result.data.iprMemberName
	                            	this.brandDetail.purchaser=result.data.purchaseMemberName
	                            	this.brandDetail.buttPerson=result.data.dockMemberName
	                            	this.brandDetail.userName=result.data.contactorName
	                            	this.brandDetail.tel=result.data.contactTel
	                            	this.brandDetail.phone=result.data.contactPhone
	                            	this.brandDetail.qq=result.data.qq
	                            	if(result.data.appealFlag==1){
	                            		this.brandDetail.serviceFlag=true
	                            	}else if(result.data.appealFlag==0){
	                            		this.brandDetail.serviceFlag=false
	                            	}
	                            	this.brandDetail.brandLevel=String(result.data.brandType)
	                            }
	                        }
        				}else{

        				}
					})
					.catch((error) => {
        				Message.error('数据不存在');
                    })
				
			},
			//取Url参数
			getUrl() {
			    var url = location.search; 
			    var theRequest = new Object();
			    if (url.indexOf("?") != -1) {
			        var str = url.substr(1);
			        var strs = str.split("&");
			        for(var i = 0; i < strs.length; i ++) {
			            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
			        }
			    }
		    	this.brandId=theRequest.id
			}
			
		},
		
		created() {

			
		},
		watch: {
            $route:function () {
                this.getUrl()
				this.getBrandDetailInfo()
            }
        },
    }
	
</script>

<style lang="scss">
	.table{
		margin-top: 10px;
        border: 1px solid #ccc;
        font-size: 14px;
        .header_row {
	        border-bottom: 1px solid #ccc;
	        line-height: 40px;
	        font-weight: bold;
	        color: #008dd8;
	        text-indent: 10px;
	        background: #f1f2f2;
	    }
	    .col_2, .col_4 {
	        text-align: left;
	        text-indent: 3px;
	    }
	
	    .col_1, .col_3 {
	        text-align: right;
	        background: #f1f2f2;
	    }
	    .col_1, .col_2, .col_3 {
	        border-right: 1px dotted #ccc;
	        border-bottom: 1px dotted #ccc;
		    &:last-child {
		         border-bottom: none
		    }
	    }
	    .col_4 {
	        border-bottom: 1px dotted #ccc;
	    }
	    .el-col {
	        height: 40px;
	        line-height: 40px;
		    .el-button-group {
		        margin-left: 10px;
		    }
    	}
    	.content_title, .content_text {
	        height: 300px;
	    }
	   
    	.table_action_row {
	        text-align: center;
	        background: #f1f2f2;
	    }
	     
	}
	.paging{
    	margin-top: 15px;
    }
	.el-date-editor.el-input{
		width: 215px;
	}
    .el-form {
			.el-form-item {
				width: 60%
			}
		}
	
</style>